<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			li {
				list-style-type: none;
			}

			.tab {
				width: 978px;
				margin: 100px auto;
			}

			.tab_list {
				height: 39px;
				border: 1px solid #ccc;
				background-color: #f1f1f1;
			}

			.tab_list li {
				float: left;
				height: 39px;
				line-height: 39px;
				padding: 0 20px;
				text-align: center;
				cursor: pointer;
			}

			.tab_list .current {
				background-color: #c81623;
				color: #fff;
			}

			.item_info {
				padding: 20px 0 0 20px;
			}

			.item {
				display: none;
			}
		</style>
	</head>
	<body>
		<div class="tab">
			<div class="tab_list">
				<ul>
					<li class="current">商品介绍</li>
					<li>规格与包装</li>
					<li>售后保障</li>
					<li>商品评价（50000）</li>
					<li>手机社区</li>
				</ul>
			</div>
			<div class="tab_con">
				<div class="item" style="display: block;">
					商品介绍模块内容
				</div>
				<div class="item">
					规格与包装模块内容
				</div>
				<div class="item">
					售后保障模块内容
				</div>
				<div class="item">
					商品评价（50000）模块内容
				</div>
				<div class="item">
					手机社区模块内容
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var tab_list = document.querySelector(".tab_list");
			var lis = tab_list.querySelectorAll("li");
			var items = document.querySelectorAll(".item");
			for (var i = 0; i < lis.length; i++) {
				lis[i].setAttribute('index', i);
				lis[i].onclick = function() {
					for (var i = 0; i < lis.length; i++) {
						lis[i].className = "";
					}
					this.className = "current";
					var index = this.getAttribute('index')
					for (var i = 0; i < items.length; i++) {
						items[i].style.display = 'none';
					}
					items[index].style.display = 'block';
				}
			}
		</script>
	</body>
</html>
